Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Styles: Extend block style variations as mechanism for achieving section styling #57908

Merged
merged 52 commits into from
May 29, 2024

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Jan 17, 2024

Addresses:

Related:

What?

#56540 aimed to render block style variation styles within the overall global styles stylesheet. This was problematic in that it required increasing specificity of element styles applied to block instances as well as being unable to be reliably nested.

The idea in this PR is to reduce the specificity as far as possible for block style variations and their inner element and block type styles. Then generate stylesheets for the application of these variations in the order of their application (parent > child > grandchild etc) such that the correct cascade is maintained. This is so block style variations can be applied on nested blocks.

Why?

The ability to style entire sections of a page without having to tediously reapply the same sets of styles is greatly desired. Block style variations seemed to be the best mechanism for defining these styles.

How?

  • Leverages global styles data added to the block editor settings via #61556
  • Allows early return from utils scoping selectors
  • Style variation theme.json partials are classified as block style variations if they define a top-level blockTypes property.
    • If a theme.json partial does not specify a non-empty array for the blockTypes key, it will be treated as a theme style variation for backwards compatibility.
  • Supports automatic registration of block style variations that are defined via:
    • Standalone theme.json partial files in /styles that have "block" within its defined scopes
    • The styles.blocks.variations property of a theme's primary theme.json file
    • The styles.blocks.variations property of a theme style variation partial theme.json
  • Existing theme.json data filters have been leveraged to absorb the above shared block style variation definitions into their respective block type styles: e.g. styles.blocks.core/group.variations
  • A block-style-variations block support has been added that injects a unique CSS class per block instance application of a block style variation.
  • The "block style variations" block support also generates a partial theme.json stylesheet for each application of a variation (this is the key to nesting variations)
  • Adds JS hook for variations and defines useBlockProps to generate the styles on the editor side so they update correctly upon application to blocks.
  • Block style variation definitions are applied in the following order:
    • Block style registry
    • Shared theme.json partials in /styles
    • Primary theme.json file
    • User origin data e.g. applied theme style variation definitions
  • Theme.json class has been updated to not strip out extended block style variation data e.g. inner element/block type styles or shared variation definitions.
  • The theme.json class generation of block metadata was tweaked so that:
    • Block style variations within the block styles registry are included in the valid variations
    • The block style registry is still checked when retrieving cached block metadata in the case the registered block types hasn't changed.
  • Theme.json stylesheet generation now allows skipping layout styles so that partial stylesheets can be generated with reduced styles
  • Global Styles Provider required updating to merge user origin definitions (those from theme style variations) into their respective block types
  • Global Styles variation panel has been updated to include core block style variations and those with definitions with merged theme.json data
  • New test theme added with standalone partial theme.json files for block style variations

This PR is a bit of a monster but would be much more difficult to test properly if split up. It will be easier to review the code changes per commit as they were deliberately made in smaller conceptual chunks.

Next Steps

There are two main follow-ups needed and both will be explored separately once this initial iteration has merged.

  1. Updates to the block styles UI
  2. Making block style variation theme.json partials live in the same folder as theme style variations i.e. a theme's /styles directory

Testing Instructions

Setting up test block style variations

There are several methods by which block style variations can be added.

  1. Programmatically via gutenberg_register_block_style
  2. By standalone theme.json partials within a theme's /styles subdirectory
  3. Via theme style variations defining block style variations under styles.blocks.variations

Programmatically

Within a theme's functions.php or a plugin, a call can me made to the new extended version of gutenberg_register_block_style, passing it an array of block types the variation can be used with as well as a style object definition the variation's styles. The theme.json resolver will absorb any styles registered via this approach into the theme's theme.json data.

Example usage
gutenberg_register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'       => 'green',
		'label'      => __( 'Green', 'twentytwentythree' ),
		'style_data' => array(
			'color'    => array(
				'background' => '#4f6f52',
				'text'       => '#d2e3c8',
			),
			'blocks'   => array(
				'core/group' => array(
					'color' => array(
						'background' => '#739072',
						'text'       => '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
)

Standalone partial files

These partials will live (for now) under the /block-styles directory in the theme directory.

Block style variation theme.json partial files share the same directory as theme style variations, i.e. /styles in the theme directory.

These theme.json partial files will support a new blockTypes property.

The new blockTypes property serves a dual purpose. Firstly, it defines an array of block types the variation is available for. Secondly, if it is a non-empty array, it flags a variation as a block style variation.

These block style variations will be automatically registered and absorbed into the theme's theme.json data by the resolver.

Example
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Variation A",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

Defined by theme style variations

As theme style variations are essentially theme.json partials themselves that are copied into the user origin's theme.json data, they can't easily pull into other partials for block style variations. This lead to reintroducing the styles.blocks.variations property for theme.json.

Similar to the standalone block style variations, each definition under styles.blocks.variations will require a new property blockTypes to define the block types that get the variation.

Example
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Red",
	"styles": {
		"blocks": {
			"variations": {
				"variation-a": {
					"blockTypes": [
						"core/group",
						"core/columns"
					],
					"color": {
						"background": "#eed8d3",
						"text": "#201819"
					},
					"elements": {
						"heading": {
						"color": {
							"text": "#201819"
						}
					}
				},
				"blocks": {
					"core/group": {
						"color": {
							"background": "#825f58",
							"text": "#eed8d3"
						},
						"elements": {
							"heading": {
								"color": {
									"text": "#eed8d3"
								}
							}
						}
					}
				}
			}
		}
	}
}

Things to test

  1. Confirm each method of block style variation registration works and they are available in both editors
  2. Check that existing block style variations on core blocks continue to work
  3. Test applying a block style variation correctly applies its styles to the block, inner elements, and inner blocks as per the variation's definition
  4. Test that applying a variation within a block that already has a variation has the correct styles applied i.e. the inner variation's styles should be applied even if the variation applied to an outer block defines inner block styles
  5. With variations applied to several blocks including nesting variations, ensure that switching block style variations works as expected in the editors
  6. Test block style variations that are defined in different places i.e. in the primary theme.json, overridden in a theme style variation, or only defined within the theme style variation
  7. Confirm that block that use feature level selectors, such as the Image block and its borders, can be styled correctly using block style variations in both editors and the frontend.
  8. Make sure that setting element styles on an individual block instance continues to take precedence
  9. Check that the frontend matches the display in the editor
  10. Try out editing a theme.json file, setting its schema to the updated version in this PR, and check the auto-completion, linting etc works as desired.
  11. Double check whether block style variations with margin styles work correctly when alongside layout global styles.
  12. Updated unit tests should be passing as well:
npm run test:unit:php:base -- --filter WP_Theme_JSON_Gutenberg_Test
npm run test:unit:php:base -- --filter WP_Theme_JSON_Resolver_Gutenberg_Test
npm run test:unit:php:base -- --filter WP_Block_Supports_Block_Style_Variations_Test
npm run test:unit packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Testing Instructions for Keyboard

Screenshots or screencast

Screen.Recording.2024-05-28.at.6.36.06.PM.mp4

Quickly hacked together TT4 child theme used in above demo.

Copy link

github-actions bot commented Jan 24, 2024

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/block-supports/block-style-variations.php
❔ phpunit/block-supports/block-style-variations-test.php
❔ phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
❔ phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json
❔ phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
❔ phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json
❔ phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json
❔ lib/class-wp-theme-json-gutenberg.php
❔ lib/class-wp-theme-json-resolver-gutenberg.php
❔ lib/load.php
❔ phpunit/class-wp-theme-json-resolver-test.php

Copy link

github-actions bot commented Jan 24, 2024

Size Change: -422 B (-0.02%)

Total Size: 1.74 MB

Filename Size Change
build/block-editor/index.min.js 260 kB +394 B (+0.15%)
build/block-editor/style-rtl.css 15.6 kB +65 B (+0.42%)
build/block-editor/style.css 15.6 kB +66 B (+0.43%)
build/block-library/blocks/block/editor-rtl.css 0 B -277 B (removed) 🏆
build/block-library/blocks/block/editor.css 0 B -277 B (removed) 🏆
build/block-library/blocks/cover/editor-rtl.css 667 B -4 B (-0.6%)
build/block-library/blocks/cover/editor.css 670 B -4 B (-0.59%)
build/block-library/blocks/cover/style-rtl.css 1.62 kB -48 B (-2.87%)
build/block-library/blocks/cover/style.css 1.61 kB -48 B (-2.89%)
build/block-library/blocks/latest-posts/editor-rtl.css 205 B -32 B (-13.5%) 👏
build/block-library/blocks/latest-posts/editor.css 205 B -31 B (-13.14%) 👏
build/block-library/blocks/list/style-rtl.css 102 B +14 B (+15.91%) ⚠️
build/block-library/blocks/list/style.css 102 B +14 B (+15.91%) ⚠️
build/block-library/blocks/paragraph/style-rtl.css 341 B +6 B (+1.79%)
build/block-library/blocks/paragraph/style.css 341 B +6 B (+1.79%)
build/block-library/editor-rtl.css 12 kB -165 B (-1.36%)
build/block-library/editor.css 12 kB -172 B (-1.42%)
build/block-library/index.min.js 218 kB +22 B (+0.01%)
build/block-library/style-rtl.css 14.6 kB -40 B (-0.27%)
build/block-library/style.css 14.6 kB -40 B (-0.27%)
build/compose/index.min.js 12.8 kB -3 B (-0.02%)
build/edit-post/index.min.js 14.5 kB -30 B (-0.21%)
build/edit-post/style-rtl.css 2.36 kB -88 B (-3.59%)
build/edit-post/style.css 2.36 kB -87 B (-3.56%)
build/edit-site/index.min.js 210 kB +57 B (+0.03%)
build/edit-site/style-rtl.css 12 kB -192 B (-1.58%)
build/edit-site/style.css 12 kB -191 B (-1.57%)
build/edit-widgets/style-rtl.css 4.19 kB +9 B (+0.22%)
build/edit-widgets/style.css 4.18 kB +4 B (+0.1%)
build/editor/index.min.js 92.6 kB +495 B (+0.54%)
build/editor/style-rtl.css 8.78 kB +7 B (+0.08%)
build/editor/style.css 8.78 kB +1 B (+0.01%)
build/interactivity/debug.min.js 16.5 kB +75 B (+0.46%)
build/interactivity/index.min.js 13.3 kB +72 B (+0.54%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.27 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.29 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.57 kB
build/block-editor/default-editor-styles-rtl.css 395 B
build/block-editor/default-editor-styles.css 395 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 307 B
build/block-library/blocks/button/editor.css 307 B
build/block-library/blocks/button/style-rtl.css 539 B
build/block-library/blocks/button/style.css 539 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 312 B
build/block-library/blocks/embed/editor.css 312 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 962 B
build/block-library/blocks/gallery/editor.css 965 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 403 B
build/block-library/blocks/group/editor.css 403 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 891 B
build/block-library/blocks/image/editor.css 891 B
build/block-library/blocks/image/style-rtl.css 1.52 kB
build/block-library/blocks/image/style.css 1.52 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/style-rtl.css 512 B
build/block-library/blocks/latest-posts/style.css 512 B
build/block-library/blocks/media-text/editor-rtl.css 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 193 B
build/block-library/blocks/navigation-link/style.css 192 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 734 B
build/block-library/blocks/post-featured-image/editor.css 732 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 397 B
build/block-library/blocks/post-template/style.css 396 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 344 B
build/block-library/blocks/pullquote/style.css 343 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 690 B
build/block-library/blocks/search/style.css 689 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 805 B
build/block-library/blocks/site-logo/editor.css 805 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 124 B
build/block-library/blocks/site-title/editor.css 124 B
build/block-library/blocks/site-title/style-rtl.css 70 B
build/block-library/blocks/site-title/style.css 70 B
build/block-library/blocks/social-link/editor-rtl.css 335 B
build/block-library/blocks/social-link/editor.css 335 B
build/block-library/blocks/social-links/editor-rtl.css 683 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.51 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 265 B
build/block-library/blocks/tag-cloud/style.css 266 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 112 B
build/block-library/blocks/template-part/theme.css 112 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 703 B
build/block-library/theme.css 706 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.8 kB
build/commands/index.min.js 15.2 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/components/index.min.js 222 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/core-commands/index.min.js 2.71 kB
build/core-data/index.min.js 72.5 kB
build/customize-widgets/index.min.js 10.9 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 9.01 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 578 B
build/edit-widgets/index.min.js 17.5 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.09 kB
build/format-library/style-rtl.css 493 B
build/format-library/style.css 492 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 2.81 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 851 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.58 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.51 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 719 B
build/preferences/style.css 721 B
build/primitives/index.min.js 831 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 629 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.97 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.02 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.74 kB
build/vendors/react-dom.min.js 42.8 kB
build/vendors/react-jsx-runtime.min.js 554 B
build/vendors/react.min.js 2.65 kB
build/viewport/index.min.js 964 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.13 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@tellthemachines
Copy link
Contributor

Testing this now: registering styles via PHP is working as expected but I can't get it to work by adding a "variations" section to TT4's styles/ember.json. I just added

"variations": {
				"variation-b": {
					"supportedBlockTypes": [
						"core/group",
						"core/navigation",
						"core/buttons"
					],
					"color": {
						"background": "#334455",
						"text": "#236789"
					},
					"elements": {
						"heading": {
							"color": {
								"text": "#9988dd"
							}
						},
						"button": {
							"background": "#aa22aa"
						}
					},
					"blocks": {
						"core/group": {
							"color": {
								"background": "#229977",
								"text": "#0000ff"
							},
							"elements": {
								"heading": {
									"color": {
										"text": "#00ff00"
									}
								}
							}
						}
					}
				}
			},

under styles > blocks, not sure if that's right?

@aaronrobertshaw
Copy link
Contributor Author

Thanks for giving this a run @tellthemachines 👍

Testing this now: registering styles via PHP is working as expected but I can't get it to work by adding a "variations" section to TT4's styles/ember.json

This is a known issue flagged by @richtabor a few days ago.

The issue is there is no automatic registration of block style variations defined in a theme style variation. It currently relies on the block style variation being registered either by the primary theme (e.g. standalone partial theme.json file under /block-styles) or through the PHP gutenberg_register_block_style function.

I've been AFK recently but am just now picking this back up. So automatic registration of theme style variations should be implemented here soon. What might delay that though is we need to decide if theme style variation definitions of block style variations, should completely replace those defined by the theme or be merged as per about all other Global Styles.

@SaxonF
Copy link
Contributor

SaxonF commented Feb 12, 2024

we need to decide if theme style variation definitions of block style variations, should completely replace those defined by the theme or be merged as per about all other Global Styles.

I'd lean towards merging to start. Reasoning is you might have variations that just change certain characteristics but not others e.g. you want dark background of parent variation but border radius of child. It's a little more flexible.

@aaronrobertshaw
Copy link
Contributor Author

I'd lean towards merging to start. Reasoning is you might have variations that just change certain characteristics but not others e.g. you want dark background of parent variation but border radius of child. It's a little more flexible.

Thanks for the quick feedback on that @SaxonF 🚀

The current approach in this PR is to merge any block style variation definitions.

When a theme style variation is applied, its data is basically copied into the user's Global Styles. This includes the new styles.blocks.variations property containing the theme style variation's block style variation definitions.

There is a new filter that resolves these definitions under their respective block types within the user origin. That process honours any current tweaks a user has made to a block style variation for the current theme (including theme style variation).

That side of it is working ok from recent testing. The one catch is how a theme style variation might opt out of a block style variation defined by the primary theme. We might be able to allow the theme style variations to set the block style variation it wants to opt out of to false or something to flag it to be deregistered. This is on my list of things to do.

FWIW, the merging of variation styles is also in line with some other ongoing conversations around how settings should be merged across origins.

Moving forward, I don't think beginning with a merge-based approach hurts us long term.

Any early adopters who would have preferred the "replacement" approach can just define complete overrides for the block style variations within a theme style variation. By that I mean, any styles set on the original variation would have a matching one in the theme style variation version. If we then later moved to a complete replacement of block style variations with those in the theme style variation, those early definitions would only have a few extra styles defined that could potentially be removed.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks super promising!

It's cool that editing a shared variation in global styles for a particular block works, applying the edited styles to just that block. Might there also be need for a UI to edit the shared variation for all blocks simultaneously?

lib/block-supports/variations.php Outdated Show resolved Hide resolved
lib/compat/wordpress-6.5/blocks.php Outdated Show resolved Hide resolved
lib/block-supports/variations.php Outdated Show resolved Hide resolved
Copy link

github-actions bot commented Feb 13, 2024

Flaky tests detected in a24faaf.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9263075329
📝 Reported issues:

@aaronrobertshaw aaronrobertshaw force-pushed the add/section-styling-via-block-styles branch from 48a9132 to 164586d Compare February 16, 2024 01:20
@aaronrobertshaw aaronrobertshaw changed the base branch from trunk to try/reduce-global-styles-specificity February 16, 2024 01:25
@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented Feb 19, 2024

I think this PR is getting closer to being ready to move out of draft status but there are a few aspects to it I'd like to flag and see if there are some better approaches.

Storing selected block style variation name in block attribtues (style.variation)

To support nesting block style variations, the variations styles need to be generated specifically for each application of a variation. For the correct cascade, a parent block's variation styles need to be created before any variation styles for its inner blocks. This led to the use of the pre_render_block filter.

The catch is that to retrieve the variation's style data, the name of the variation is required and within the pre_render_block filter, the variation class isn't added to the className attribute. To get this working, the selected variation is stored within the style block attribute.

Is there a better approach here?

Update: As flagged in #57908 (comment), the style.variation attribute wasn't required. I haven't tracked down what lead to the incorrect approach above, might have been a bug in a previous iteration of this work I failed to revisit.

Maintaining style load order for editor overrides

With zero specificity styles, the load order is key to the cascade functioning correctly. Before this PR, useStyleOverride would delete and re-add style overrides which alters the insertion order of the underlying Map, breaking the load order of variation styles.

This is complicated further by the need to be able to apply variations to blocks at different levels in the hierarchy, in different orders.

Achieving the desired behaviour, required passing along data that indicated which applications of variations occurred within the inner blocks. This meant that if an existing variation was being changed in the editor, its style overrides could be updated but any overrides for inner variations would be kept/moved after the parent in the load order. While this would already be the case for an existing application of a variation, a new entry in the Map would be required when applying new variations at different levels of the block markup.

To be able to keep the variation IDs predictable and aligned with the generated stylesheet for the variation, it turned out the clientId was a better option than using useInstanceId. Are there any issues with this that I might be missing?

Merging user origin block style variation data in the editor

The requirement to support block style variation definitions from within a theme style variation meant that the variation definitions would live at the user origin level in Global Styles. This meant needing to resolve these definitions into their respective block types on the JS side in the site editor. I wasn't sure where the best place was for this to occur but the GlobalStylesProvider seemed like the best bet, but I'm happy to change this up if anyone has a better idea.

@youknowriad and @ellatrix, if you can spare some time, it would be great to get your thoughts, suggestions, and wisdom on this PR 🙏

@juanmaguitar juanmaguitar mentioned this pull request May 29, 2024
49 tasks
@talldan
Copy link
Contributor

talldan commented May 30, 2024

Update here on my latest understanding of the issue - https://github.com/WordPress/wordpress-develop/pull/6271/files#r1619805687.

I don't think the error is an immediate concern, as the core backport for sections styling resolves the issue. Most important thing is to get the backport committed.

There's some conversation required around how Gutenberg will extend the theme json when implementing new features in the future though.

@aaronrobertshaw
Copy link
Contributor Author

Nice sleuthing @talldan 🕵️

I don't think the error is an immediate concern, as the core backport for sections styling resolves the issue

Agreed. As far as this PR and feature are concerned, once the backport is merged, I think we're good.

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request May 31, 2024
Provide users with the ability to style entire sections of a page without
having to tediously reapply the same sets of styles.

This is done by extending block style variations to apply to nested blocks.

See WordPress/gutenberg#57908.

Fixes #61312.
Props aaronrobertshaw, talldanwp, ramonopoly, isabel_brison, andrewserong.


git-svn-id: https://develop.svn.wordpress.org/trunk@58264 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request May 31, 2024
Provide users with the ability to style entire sections of a page without
having to tediously reapply the same sets of styles.

This is done by extending block style variations to apply to nested blocks.

See WordPress/gutenberg#57908.

Fixes #61312.
Props aaronrobertshaw, talldanwp, ramonopoly, isabel_brison, andrewserong.

Built from https://develop.svn.wordpress.org/trunk@58264


git-svn-id: http://core.svn.wordpress.org/trunk@57727 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request May 31, 2024
Provide users with the ability to style entire sections of a page without
having to tediously reapply the same sets of styles.

This is done by extending block style variations to apply to nested blocks.

See WordPress/gutenberg#57908.

Fixes #61312.
Props aaronrobertshaw, talldanwp, ramonopoly, isabel_brison, andrewserong.

Built from https://develop.svn.wordpress.org/trunk@58264


git-svn-id: https://core.svn.wordpress.org/trunk@57727 1a063a9b-81f0-0310-95a4-ce76da25c4cd
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jun 4, 2024
…g section styling (WordPress#57908)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org>
Co-authored-by: bacoords <bacoords@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
@aaronrobertshaw
Copy link
Contributor Author

aaronrobertshaw commented Jun 6, 2024

Dev Note - Section Styles (draft)

In WordPress 6.6, Section Styles simplify the process of styling individual sections of a webpage by offering users a one-click application of curated styles, eliminating the need for repetitive manual configuration.

What's Changed?

Section-based styling has been enabled by extending the existing Block Styles feature (aka block style variations) to support styling inner elements and blocks. These enhanced block style variations can even be applied in a nested fashion due to uniform CSS specificity (0-1-0) for Global Styles introduced in WP 6.6.

In addition, block style variations can now be:

  • registered across multiple block types at the same time
  • defined via multiple methods; primarily through theme.json partials, or by passing a theme.json shaped object in the style's data given to existing block style registration functions
  • customized via Global Styles (see also current limitations)

Usage

Registration of Block Style Variations

The block style variations that can be defined and manipulated through Global Styles are limited to those that have been registered with the WP_Block_Styles_Registry or via a block type's styles property, such as Outline for the Button block. If a block style variation has not been registered, any theme.json or global styles data for it will be stripped out.

Any unregistered block style variation defined within a theme.json partial with be automatically registered.

Outlined below are three approaches to registering extended block style variations. The approaches leveraging theme.json definitions will automatically register the block style variation with the WP_Block_Styles_Registry.

Defining Block Style Variations

Outlined below are recommended approaches to registering extended block style variations.

Theme.json Partial Files

With the extension of block style variations to support inner element and block type styles, they essentially are their own theme.json file much like theme style variations. As such, block style variations also reside under a theme's /styles directory. They are differentiated from theme style variations however by the introduction of a new top-level property called blockTypes. The blockTypes property is an array of block types the block style variation can be applied to.

A new slug property was also added to provide consistency between the different sources that may define block style variations and to decouple the slug from the translatable title property.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}
Programmatically

Within a theme's functions.php or a plugin, a call can be made to register_block_style, passing it an array of block types the variation can be used with as well as a theme.json shaped style object defining the variation's styles. The style object provided here will be absorbed into the theme's theme.json data.

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'       => 'green',
		'label'      => __( 'Green' ),
		'style_data' => array(
			'color'    => array(
				'background' => '#4f6f52',
				'text'       => '#d2e3c8',
			),
			'blocks'   => array(
				'core/group' => array(
					'color' => array(
						'background' => '#739072',
						'text'       => '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
)
Via Theme Style Variations (Not Recommended)

This approach has been enabled as a temporary means to facilitate ergonomic definitions of shared block style variations through theme style variations. It is being flagged here for transparency however it will likely be deprecated soon as the Global Styles architecture is updated to address growing complexity and simplify its mental model.

More details on what's ahead for Global Styles can be found in this issue.

Shared block style variations can be defined via styles.variations. Style data defined under styles.variations will be copied to, and merged with, variation data stored at the block type level for all block types that have a matching variation registered for it.

Additionally, a new translatable title property has been added here to mirror the capabilities of the theme.json partial files outlined above.

The key for the variation correlates to the slug property for theme.json partials. In the example below, this would be variation-a.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Theme Style Variation",
	"styles": {
		"variations": {
			"variation-a": {
				"color": {
					"background": "#eed8d3",
					"text": "#201819"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#201819"
						}
					},
				},
				"blocks": {
					"core/group": {
						"color": {
							"background": "#825f58",
							"text": "#eed8d3"
						},
						"elements": {
							"heading": {
								"color": {
									"text": "#eed8d3"
								}
							}
						}
					}
				}
			},
		}
	}
}

Backwards Compatibility

As the Section Styles feature was implemented via extensions to block style variations rather than as a replacement, existing block style variations will continue to work as before.

Limitations

The following limitations for block style variations in WordPress 6.6 should be noted:

  1. Only root styles, i.e. those that apply directly to the block type the block style variation belongs to, can be configured via Global Styles.
  2. Block style variations cannot redefine or customize inner block style variations.
  3. Block style variations do not support their own custom settings values (yet).
  4. Custom block style variations cannot be applied and previewed within the Style Book.

What's Next?

The Global Styles UI for block style variations will be updated to facilitate the customization of all available styles for inner elements and block types. This includes potentially enhancing the Style Book to support block style variations.

Another future enhancement is the possible support for settings per block style variations.

Useful Links

@aaronrobertshaw aaronrobertshaw added has dev note when dev note is done (for upcoming WordPress release) and removed Needs Dev Note Requires a developer note for a major WordPress release cycle labels Jun 6, 2024
patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
…g section styling (WordPress#57908)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org>
Co-authored-by: bacoords <bacoords@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
getBlockTypes(),
getBlockStyles,
clientId
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this? Why are we getting all "block selectors" (not sure what this is but it seems more than just variation related stuff), and for all block types?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From memory, we're getting all the block selectors as block style variations can define styles for inner blocks. Those blocks can define custom selectors for certain features. For example, border styles might be applied to an inner element like in the Image block for example.

So the variations styles need to also apply the inner block styles correctly using those same selectors retrieved normally.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be only get the block types of the blocks as inner blocks?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That might be an optimisation we can make. At the moment, I'm a little preoccupied with updates over in #62712

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did this in #57908

@aaronrobertshaw
Copy link
Contributor Author

I've updated the dev note comment in to be in line with updates in #62712 that should be landing soon. I'll update the make post accordingly too.

function useBlockProps( { name, className, clientId } ) {
const { getBlockStyles } = useSelect( blocksStore );

const registeredStyles = getBlockStyles( name );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling a store selector during render could lead to some unexpected results.

The hook isn't subscribed to block style updates, and it will only fetch new values when the consumer or useBlockSyleVariation triggers a re-render.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would there be a risk when new styles are registered/deregistered?

I don't know yet if it's worth it, but I think by refactoring getBlockSelectors or creating a new function that accepts a single block type and registeredStyles (and not the function), it'd be possible to call getBlockStyles in the store subscription callback, e.g.,

const blockType = useMemo(  
    () =>  
       getBlockTypes().find(  
          ( { name: blockName } ) => blockName === name  
       ),  
    [ name ]  
);  
  
const { registeredStyles } = useSelect(  
    ( select ) => {  
       const { getBlockStyles } = select( blocksStore );  
       return {  
          registeredStyles: getBlockStyles( name ),  
       };  
    },  
    [ name ]  
);

...


const blockSelectors = getBlockSelectorForBlock(  
    blockType,  
    registeredStyles,  
    clientId  
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block Style Variations Issues or PRs that are related to the style variations for blocks has dev note when dev note is done (for upcoming WordPress release) Needs PHP backport Needs PHP backport to Core [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.